<template>
  <div class="nav-search" :class="isSearch?'active':''">
    <div class="search-content">
      <div class="search-close" @click="handleIsOpenSearch">
        <span></span>
        <span></span>
      </div>
      <input type="text" v-model="searchValue" placeholder="输入关键词搜索..." ref="searchInput" @keydown.enter="handleSearch"/>
      <span class="iconfont icon-sousuo_o" @click="handleSearch"></span>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  name:'NavSearch',
  data() {
    return {
      menuClose: false,
      searchValue:''
    };
  },
  watch:{
    isSearch(){
      if(this.isSearch){
        this.$refs.searchInput.focus();
      }
    }
  },
  computed:{
    ...mapState(['isSearch'])
  },
  created() {
    if (this.$route.name == "search" || this.$route.name == "search-page") {
      this.searchValue = this.$route.params.keyword;
    }
  },
  beforeDestroy(){
    if(this.isSearch){
      this.handleIsOpenSearch()
    }
  },
  methods: {
    ...mapMutations(["handleIsOpenSearch"]),
    menuClick() {
      this.menuClose = !this.menuClose;
    },
    //搜索
    handleSearch() {
      this.$router.push(`/search/${this.searchValue}`);
      this.handleIsOpenSearch()
    },
  },
};
</script>

<style lang="less" scoped>
.nav-search {
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  z-index: 99;
  .search-content {
    width: 500px;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 auto;
    .search-close {
      display: inline-block;
      margin-right: 14px;
      width: 20px;
      height: 20px;
      position: relative;
      cursor: pointer;
      span {
        position: absolute;
        top: 10px;
        left: 0;
        display: block;
        width: 15px;
        height: 1.5px;
        background: #000;
      }
      span:nth-of-type(1) {
        transform: rotate(45deg);
      }
      span:nth-of-type(2) {
        transform: rotate(-45deg);
      }
      &:hover {
        span {
          background: #3361ea;
        }
      }
    }
    input {
      width: 280px;
      outline: none;
      font-size: 14px;
      padding: 0 0 0 14px;
      border-left: 1px solid #000;
    }
    .iconfont {
      font-size: 20px;
      margin-right: 14px;
      font-weight: bold;
      cursor: pointer;
      &:hover {
        color: #3361ea;
      }
    }
  }
}
.nav-search.active{
  z-index: 90;
}
</style>